import React from 'react';
import BaseScreen from "../BaseScreen";
import styles from "../../css/my.module.css"
import {getSkill} from '../../service/MineService'
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import {navigateTo, locationTo} from '../../utils/LocationUtil'
import { myNav, Common } from "../../const/imgs";
import * as locations from "../../const/locations";
import { setInfo } from '../../utils/StorageUtil';
class Help extends BaseScreen{
  constructor(props){
    super(props);
    this.state={
      list:[]
    }
  }
  componentDidMount(){
    document.title='催收技巧'
    getSkill()
    .then(
      res => {
        console.log(res)
        if(res.error_code === 0){
          this.setState({
            list:res.data.data
          })
        }
      }
    )
    .catch(
      err => {
        console.log(err)
      }
    )
  }
  navigate = (e)=>{
    this.props.selectItem({id:e})
    setInfo('skill',{id:e.id,title:e.title})
    locationTo(locations.SKILLDETAIL)
  }
  render() {
    const { list } = this.state
    return(
      <div  className={styles.homes}
      style={{
        boxSizing: 'border-box',
        paddingTop:'10px',
    }}
      > 
         <div className={styles["wrapper"]}>
          <ul>
            {list.map((item, index) => (
              <Navlistone
                key={index}
                title={item.title}
                id={item.id}
                navigate={this.navigate}
              />
            ))}
          </ul>
        </div>
      </div>
    )
  }
}
const Navlistone = ({ title,id,navigate }) => {
  return (
    <li className={styles.nav_list_one} onClick={() => { navigate({id,title}) }}>
      <div className={styles.nav_list_one_l}>
        {title}
      </div>
      <div className={styles.nav_list_one_r}>
        <img src={Common.YJT} />
      </div>
    </li>
  );
}

const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};

const mapDispatchToProps = dispatch => {
  return {
    selectItem(item) {
      let params = {
        skillId: item.id,
      };
      dispatch(Actions.actionSelectProblem(params));
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Help);